import React from 'react';
import {
    BooleanField,
    Datagrid,
    DateField,
    DateInput,
    EditButton,
    Filter,
    List,
    NullableBooleanInput,
    NumberField,
    TextInput,
    Responsive,
    SimpleList,
    TextField
} from 'react-admin';
import RealTime from '../realtime';
import Icon from '@material-ui/icons/Motorcycle';
import { withStyles } from '@material-ui/core/styles';
import classnames from 'classnames';

export const CarIcon = Icon;

const filterStyles = {
    form: {
        backgroundColor: 'Lavender',
    },
};
const listStyles = {
    actions: {
        backgroundColor: 'Lavender',
    },
    header: {
        backgroundColor: 'Lavender',
    },
};
const coloredStyles = {
    small: { color: 'black' },
    big: { color: 'red' },
};

const ColoredNumberField = withStyles(coloredStyles)(
    ({ classes, ...props }) => (
        <NumberField
            className={classnames({
                [classes.small]: props.record[props.source] < 100,
                [classes.big]: props.record[props.source] >= 100,
            })}
            {...props}
        />
    ));

ColoredNumberField.defaultProps = NumberField.defaultProps;

const CarFilter = withStyles(filterStyles)(({ classes, ...props }) =>  (
    <Filter classes={classes} {...props}>
        <TextInput
            className={classes.searchInput}
            label="pos.search"
            source="q"
            alwaysOn
        />
        <DateInput source="createdAt" />
        <NullableBooleanInput source="isUsable" />
    </Filter>
));

const CarList = withStyles(listStyles)(({ classes, ...props }) => (
    <RealTime source="cars">
    <List  filters={<CarFilter />}  {...props}>
        <Responsive
            small={
                <SimpleList
                    primaryText={record => record.carNumber}
                    secondaryText={record => record.isUsable? "可用": "使用中" }
                    tertiaryText={record => new Date(record.createdAt).toLocaleDateString()}
                />
            }
            medium={
                <Datagrid>
                    <TextField source="id" />
                    <TextField source="carNumber" />
                    <TextField source="isUsable" />
                    <ColoredNumberField source="carMileage" />
                    <EditButton />
                </Datagrid>
            }
        />
    </List>
    </RealTime>
));

export default CarList;